<template>
  <!-- 筛选产品list -->
  <div class="body">
    <Header @SearchBtn="SearchBtn" :menuIndex="menuIndex"></Header>
    <div class="cennterContent">
      <div class="ListContent">
        <!-- 筛选部分 -->
        <div>
          <!-- 选择完的条件 -->
          <div class="w" id="J_crumbsBar">
            <div class="crumbs-bar clearfix">
              <div class="crumbs-nav">
                <div class="crumbs-nav-main clearfix">
                  <div class="crumbs-nav-item one-level">
                    <div class="crumbs-link">Solution Filter</div>
                    <i class="crumbs-arrow">&gt;</i>
                  </div>

                  <!--通过typeList区分 -->
                  <div class="filterList">
                    <a
                      class="crumb-select-item"
                      rel="nofollow"
                      v-for="(item, index) in SetFilterList"
                      :key="index"
                    >
                      <b>{{ item.type }}:</b>
                      <em>{{ item.name }}</em>
                      <i @click="delFliter(index)" class="delIcon"></i>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 筛选选择框 -->

          <div id="J_selector" class="selector">
            <div class="J_selectorLine s-category">
              <div class="sl-wrap">
                <div class="sl-key">
                  <strong>SolutionMap</strong>
                </div>
                <div class="sl-value" v-if="SectionList.length > 0">
                  <div class="sl-v-list">
                    <ul class="J_valueList flex">
                      <div
                        v-for="(item, index) in SectionList"
                        :key="index"
                        @click="addtFiltertype(item, 'section')"
                      >
                        <li>
                          <a>
                            <i></i>
                            {{ item.name }}
                          </a>
                        </li>
                      </div>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="J_selectorLine s-category">
              <div class="sl-wrap">
                <div class="sl-key">
                  <strong>Department</strong>
                </div>
                <div class="sl-value" v-if="DepartmentInfo.length > 0">
                  <div class="sl-v-list">
                    <ul class="J_valueList flex">
                      <div
                        v-for="(item, index) in DepartmentInfo"
                        :key="index"
                        @click="addtFiltertype(item, 'Department')"
                      >
                        <li>
                          <a>
                            <i></i>
                            {{ item.DeptName }}
                          </a>
                        </li>
                      </div>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 方案列表 -->
      <div class="solutionListBox filter">
        <!-- <div class="f-line top flex">
          <div class="f-sort">
            <a @click="SearchAllList('hot')" :class="listSortIndex===0?'curr':''">
              <span class="fs-tit">ActiveValue</span>
              <em class="fs-down">
                <a-icon type="arrow-down" v-if="hotStatus===0" />
                <a-icon type="arrow-up" v-else />
              </em>
            </a>
            <a @click="SearchAllList('time')" :class="listSortIndex===1?'curr':''">
              <span class="fs-tit">Time</span>
              <em class="fs-down">
                <a-icon type="arrow-down" v-if="timeStatus===0" />
                <a-icon type="arrow-up" v-else />
              </em>
            </a>

          </div>
        </div>-->
        <div id="J_goodsList" class="goods-list-v2 gl-type-2 J-goods-list">
          <ul class="gl-warp clearfix flex jc">
            <li
              class="gl-item"
              v-for="(item, index) in schemeList"
              :key="index"
              @click="toSchemePage(item)"
            >
              <div class="gl-i-wrap">
                <div class="p-img">
                  <a target="_blank">
                    <a-empty
                      v-if="!item.ImageUrl"
                      style
                      class="empty"
                      :description="'No pictures'"
                    />
                    <img width="220" height="282" :src="item.ImageUrl" @error="errorImg" />
                  </a>
                </div>
                <!-- scroll img -->
                <div class="p-scroll scrolled"></div>
                <div class="p-commit">
                  <div>
                    <strong>
                      Name
                      <a>{{ item.SolutionName }}</a>
                    </strong>
                  </div>
                </div>
                <div class="p-commit">
                  <div>
                    <strong>
                      Owner
                      <a>{{ item.CreateUser }}</a>
                    </strong>
                  </div>
                </div>
                <div class="p-commit">
                  <div>
                    <strong>
                      Dept
                      <a>{{ item.DeptName }}</a>
                    </strong>
                  </div>
                </div>
                <div class="p-commit">
                  <div>
                    <strong>
                      UpdateTime
                      <a>{{ item.UpdateTime }}</a>
                    </strong>
                  </div>
                </div>
                <div class="p-commit">
                  <div>
                    <strong>
                      BrowseTimes
                      <a style="color: #ff6a00;">{{ item.BrowseTimes }}</a>
                    </strong>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>

        <!-- 分页 -->
        <div id="components-pagination-demo-mini" class="paginationBox">
          <!-- :total="SolutionTotalCount" -->

          <a-pagination
            :total="totalCount"
            show-size-changer
            show-quick-jumper
            class="pagination"
            v-model="listCurrentPage"
            :page-size.sync="listPageSize"
            @change="paginationChange"
            @showSizeChange="paginationChange"
          />
        </div>
      </div>
    </div>
    <a-modal
      v-model="moudelVisible"
      :width="888"
      @ok="CloseModal"
      @cancel="CloseModal"
      :maskClosable="true"
    >
      <div class="singleSolutionPop">
        <div class="flex">
          <img
            v-if="singleSolution.ImageUrl"
            :src="singleSolution.ImageUrl"
            class="img"
            @error="errorImg"
          />
          <img v-else src="../../assets/img/noImg.png" class="img" />
          <div class="rightContent">
            <p class="SolutionName">{{ singleSolution.SolutionName }}</p>

            <p>
              <span class="t1">SolutionMap:</span>
              <span class="t2">{{ singleSolution.SolutionMap }}</span>
            </p>
            <p>
              <span class="t1">Department:</span>
              <span class="t2">{{ singleSolution.DeptName }}</span>
            </p>
            <p>
              <span class="t1">Owner:</span>
              <span class="t2">{{ singleSolution.CreateUser }}</span>
            </p>
            <p>
              <span class="t1">UpdateTime:</span>
              <span class="t2">{{ singleSolution.UpdateTime }}</span>
            </p>
            <p>
              <span class="t1">BrowseTimes:</span>
              <span class="t2">{{ singleSolution.BrowseTimes }}</span>
            </p>
          </div>
        </div>
        <div style="margin:28px 0;">
          <simpleVideo
            v-if="singleSolution.Video && moudelVisible"
            :videoUrl="singleSolution.Video"
            :width="738.8"
            :height="588"
          ></simpleVideo>
        </div>
        <div v-if="singleSolution.Summary" class="summarytit">Summary</div>
        <div v-if="singleSolution.Summary" v-text="singleSolution.Summary"></div>

        <div v-if="singleSolution.Details" class="summarytit">Detail</div>
        <div v-if="singleSolution.Details" v-html="singleSolution.Details"></div>

        <div class="summarytit">Comment</div>
        <a-empty
          style="margin-bottom:50px;"
          v-if="!InnovationCommentList || InnovationCommentList.length <= 0"
          class="SolutionImg"
          :description="'No one has commented yet'"
        />
        <!--评论列表 -->
        <div>
          <div class="tab-con" v-if="InnovationCommentList && InnovationCommentList.length > 0">
            <div v-for="(item, index) in InnovationCommentList" :key="index" class="comment-item">
              <div class="user-column">
                <div class="user-info">
                  <a-avatar shape="square" icon="user" />
                  {{ item.UserName }}
                </div>
                <div class="user-level">
                  <a class="comment-plus-icon" target="_blank"></a>
                </div>
              </div>
              <div class="comment-column J-comment-column">
                <a-rate :value="item.Satisfaction" disabled class="star" />

                <p class="comment-con">{{ item.Comments }}</p>
                <div class="pic-list J-pic-list" v-if="item.Images.length > 0">
                  <div
                    class="J-thumb-img"
                    v-for="(v, i) in item.Images"
                    :key="i"
                    @click="shopImgPreview($event, v, i, index, item.Images, item)"
                    :class="item.activeIndex === i ? 'active' : ''"
                  >
                    <img :src="v" width="48" height="48" @error="errorImg" />
                    <span class="video-icon"></span>
                  </div>
                </div>

                <img
                  v-show="item.isShowImg"
                  :src="item.selectUrl"
                  @error="errorImg"
                  class="fatshowImg"
                  @click="() => (item.isShowImg = false)"
                />
                <div class="J-video-view-wrap clearfix" style="display: block;"></div>
                <div class="comment-message">
                  <div class="order-info">
                    <span></span>
                    <span></span>
                    <span>{{ item.CreateTime }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <a-pagination
            v-if="InnovationCommentList && InnovationCommentList.length > 0"
            v-model="commentPage"
            show-size-changer
            show-quick-jumper
            :page-size.sync="commentPageSize"
            :total="commentCount"
            @showSizeChange="changePage"
            @change="changePage"
            class="pagination"
          />
          <a-form class="mc0" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item label="Comments">
              <a-textarea
                placeholder
                v-model="Comments"
                allowClear
                class="textArea"
                :auto-size="{ minRows: 8, maxRows: 18 }"
                style="width:350px;"
              ></a-textarea>
            </a-form-item>
            <a-form-item label="Satisfaction">
              <a-rate v-model="Satisfaction" />
            </a-form-item>
            <a-form-item label="Images">
              <imgUpload @uploadFileList="getImgFile" :imageArr="Images" :doType="doType"></imgUpload>
            </a-form-item>
          </a-form>
          <a-button type="primary" class style="margin-left: 158px;" @click="AddComment">Submit</a-button>
        </div>
      </div>
    </a-modal>
    <!--登陆弹窗 -->
    <a-modal v-model="isLoginVisible" :maskClosable="true" :footer="null">
      <a-form id="components-form-demo-normal-login" class="login-form" style="margin-top:38px;">
        <a-form-item>
          <a-input placeholder="NTID" v-model="NTID">
            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model="password" type="password" placeholder="Password">
            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-item>
        <a-form-item>
          <!-- <a class="login-form-forgot" href>Forgot password</a> -->
          <a-button
            type="primary"
            html-type="submit"
            class="login-form-button"
            @click="LoginSubmit"
          >Login</a-button>
          <router-link to="/register">Or Register</router-link>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import Header from '@/components/layout/pureHeader'
import simpleVideo from '@/components/video/video'
import imgUpload from '@/components/upload/imgUpload'
import userApi from '@/api/httpApi/user'

export default {
  data() {
    return {
      SetFilterList: [], //筛选条件集合
      DepartmentList: [],
      cityList: [],
      companyNameList: [],
      isMoreCompany: false,
      isShowAllCity: false,
      SearchText: '',
      theModule: '',
      schemeList: [],
      totalCount: 0,
      listPageSize: 20,
      listCurrentPage: 1,
      menuIndex: 1,
      DDepartment: '',
      EditDeptId: '',
      CreateBy: '',
      DDateList: [],
      city: '',
      pdfUrl: '',
      DeptIdList: '',
      CityList: '',
      CompanyList: '',
      DDeptId: '',
      CityInfo: [],
      Company: '',
      DCompany: '',
      DCity: '',
      City: '',
      DSloution: '',
      DepartmentInfo: [],
      CompanyInfo: [],
      SectionList: [],
      moudelVisible: false,
      singleSolution: {},
      SolutionMapList: [],
      SolutionId: '',
      UserId: '',
      UserName: '',
      Comments: '',
      Satisfaction: 0,
      CommentImagesList: [],
      CommentVideo: '',
      QueType: 'Image',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 20 },
        sm: { span: 12 },
      },
      userReviewsInfo: {},
      doType: 'add',
      Images: [],
      InnovationCommentList: [],
      commentCount: 0,
      commentPage: 1,
      commentPageSize: 10,
      isLoginVisible: false,
      userName: '',
      password: '',
      NTID: '',
    }
  },
  components: {
    Header,
    simpleVideo,
    imgUpload,
  },
  watch: {
    SetFilterList() {
      this.resetFilter()
    },
  },
  created() {
    if (this.$route.query.index) {
      this.$nextTick(() => {
        this.menuIndex = this.$route.query.index
      })
    }
    this.getDeptInfo()
  },
  mounted() {
    this.getSomeDetailsInfo()
    this.getAllSchemeInfo()
  },

  methods: {
    LoginSubmit() {
      if (!this.NTID) {
        this.$message.warn('Please enter the NTID')
        return
      } else if (!this.password) {
        this.$message.warn('Please enter the password')
        return
      } else {
        const data = {
          NTID: this.NTID,
          passWord: this.password,
        }
        userApi.userLogin(data).then((result) => {
          if (result.code === 0) {
            this.$message.success('Login successful!')
            sessionStorage.setItem('loginStatus', true)
            window.userId = result.data[0].NTID
            sessionStorage.setItem('userId', result.data[0].NTID)
            sessionStorage.setItem('userInfo', JSON.stringify(result.data))
            this.isLoginVisible = false
          } else {
            this.$message.error(result.description)
          }
        })
      }
    },
    CloseModal() {
      this.moudelVisible = false
      this.Images = []
      this.CommentImagesList = []
      this.Comments = ''
      this.commentPage = 1
      this.Satisfaction = 0
    },
    changePage(current, pageSize) {
      this.commentPage = current
      this.commentPageSize = pageSize
      this.getAllComment()
    },
    shopImgPreview(e, v, i, index, List, arr) {
      this.$nextTick(() => {
        this.$set(this.InnovationCommentList[index], 'selectUrl', v)
        this.$set(this.InnovationCommentList[index], 'activeIndex', i)
        this.$set(this.InnovationCommentList[index], 'isShowImg', true)
        console.log('arr :>> ', arr)
        console.log(e, v, i, List)
        console.log(this.InnovationCommentList[index])
        // this.InnovationCommentList[index].Images = eval('(' + this.InnovationCommentList[index].Images + ')');
        this.InnovationCommentList[index].Images.map((element, j) => {
          if (j === i) {
            let src = element
            element = {}
            element.activeIndex = i
            element.isShowImg = true
            console.log('element :>> ', element)
            return element
          }
        })
      })
    },
    getImgFile(e) {
      console.log('父组件获取的图片 :>> ', e)
      let fileList = e.fileList
      this.CommentImagesList = []
      if (fileList && fileList.length > 0) {
        fileList.map((item) => {
          this.CommentImagesList.push(item.response.data.fileName)
        })
      }
    },
    //  添加创新方案评论
    AddComment() {
      const that = this
      let isLogin = sessionStorage.getItem('loginStatus') == 'true'
      console.log('isLogin', isLogin)
      if (!isLogin) {
        this.isLoginVisible = true
        return
      } else if (!this.Comments) {
        this.$message.warning('Comment content cannot be empty!')
        return
      } else {
        let userName
        if (JSON.parse(sessionStorage.getItem('userInfo'))) {
          userName = JSON.parse(sessionStorage.getItem('userInfo'))[0].UserName
          console.log('userName :>> ', userName)
        }

        const a = {
          method: 'ShpInnovationReply_Add',
          userId: window.userId || 1,
          sign: '1',
          currentPage: this.commentPage,
          limit: this.commentPageSize,
          language: 1,
          fieldList: '',
          datas: {
            SolutionId: this.SolutionId,
            UserId: window.userId || 1,
            UserName: userName,
            Comments: this.Comments,
            Satisfaction: this.Satisfaction,
            Images: this.CommentImagesList,
            Video: this.CommentVideo,
          },
        }
        this.$post(a).then((res) => {
          console.log(res)
          if (res.code === 0) {
            that.$message.success('Comment on success!')
            that.Comments = ''
            that.Satisfaction = 0
            that.Images = [] //触发更新
            that.CommentImagesList = []
            that.$forceUpdate()
          }
          that.getAllComment()
        })
      }
    },
    getAllComment() {
      const a = {
        method: 'ShpInnovationReply_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.commentPage,
        limit: this.commentPageSize,
        language: 1,
        fieldList: '',
        orderByList: 'CreateTime desc',
        datas: {
          SolutionId: this.SolutionId,
          QueType: this.QueType, //只查询有图片的， "QueType":"Video" 只查询有视频的。不填是查所有。
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          console.log(result)
          this.commentCount = result.count
          this.InnovationCommentList = result.data ? result.data : []
          this.InnovationCommentList.map((item, index) => {
            item.Images = eval('(' + item.Images + ')')
            return item
          })
        }
      })
    },
    editInnovation(item) {
      const a = {
        method: 'ShpInnovation_Mod',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          SolutionId: item.SolutionId,
          BrowseTimes: item.BrowseTimes ? item.BrowseTimes + 1 : 1,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          console.log(result)
        }
        this.getAllSchemeInfo()
      })
    },
    errorImg(event) {
      this.$pk.errorImg(event)
    },
    delFliter(index) {
      this.SetFilterList.splice(index, 1)
    },
    // 数组对象去重
    deWeight(arr) {
      for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i].name == arr[j].name) {
            arr.splice(j, 1)
            //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
            j--
          }
        }
      }
      return arr
    },
    addtFiltertype(item, type) {
      let obj = item
      obj.type = type
      if (type === 'Department') {
        obj.name = item.DeptName
      } else if (type === 'section') {
        obj.name = item.name
      }
      this.SetFilterList.push(obj)
      this.SetFilterList = this.deWeight(this.SetFilterList)
    },
    getDeptInfo() {
      const a = {
        method: 'SysDept_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {},
      }
      this.$post(a).then((result) => {
        this.DepartmentInfo = result.data.length > 0 ? result.data : []
      })
    },

    // 重新配置单一筛选条件数组
    resetFilter() {
      this.DepartmentList = []
      this.DeptIdList = []
      this.SolutionMapList = []
      this.SetFilterList.map((item) => {
        let type = item.type
        if (type === 'Department') {
          this.DepartmentList.push(item.name)
          this.DeptIdList.push(item.DeptId)
        } else if (type === 'section') {
          this.SolutionMapList.push(item.name)
        }
      })
      // console.log('this.SetFilterList :>> ', this.SetFilterList)
      this.getAllSchemeInfo()
    },
    paginationChange(page, pageSize) {
      console.log(page, pageSize)
      this.listCurrentPage = page
      this.listPageSize = pageSize
      this.getAllSchemeInfo()
    },
    toSchemePage(item) {
      const that = this
      this.commentPage = 1
      console.log('item :>> ', item)
      this.SolutionId = item.SolutionId
      this.$nextTick(() => {
        that.singleSolution = item
        that.$forceUpdate()
        that.moudelVisible = true
      })
      this.editInnovation(item)
      this.getAllComment()
    },

    SearchBtn(e) {
      // console.log('e :>> ', e)
      this.SearchText = e
      this.getAllSchemeInfo()
    },
    showAllProject(type) {
      if (type === 'company') {
        this.isMoreCompany = !this.isMoreCompany
      } else if (type === 'city') {
        this.isShowAllCity = !this.isShowAllCity
      }
    },
    getSearchInfo(e) {
      // console.log('搜索内容', e)
      if (e) {
        this.SearchText = e[0]
        this.theModule = e[1]
      }
    },
    getAllSchemeInfo() {
      const a = {
        method: 'ShpInnovation_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        limit: this.pageSize,
        datas: {
          SolutionName: this.SearchText ? `%${this.SearchText}%` : '',
          DeptIdList: this.DeptIdList,
          SolutionMapList: this.SolutionMapList,
        },
      }
      this.$post(a).then((result) => {
        console.log('this.tableData  :>> ', this.tableData)
        this.schemeList = result.data
        this.totalCount = result.data.length > 0 ? result.data.length : 0
        this.schemeList.map((item) => {
          item.UpdateTime = item.UpdateTime.replace('T', ' ')
            .split('.')[0]
            .slice(0, 10)
          return item
        })
      })
    },
    getSomeDetailsInfo() {
      const a = {
        method: 'ShpSchemeType_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {},
      }
      this.$post(a).then((res) => {
        const data = res.data
        this.SectionList = data.section ? data.section : []
      })
    },
  },
}
</script>
<style lang="less" scoped>
@import url('css/supplierSolution.less');
@import url('css/Innovation.less');
</style>
